<template>
  <div class="song-list">
    <ul>
      <!--music-list组件中包含song-list组件,因此通过事件$emit()进行派发 -->
      <li @click="selectSong(song,index)" v-for="(song,index) in songs" :key="index" class="item">
        <div class="content">
          <h2 class="name">{{song.name}}</h2>
          <!--method:{} 的返回getDesc()函数 -->
          <p class="desc">{{getDesc(song)}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   props:{
     songs: {
       type: Array,
       default: []
     }
   },
  data() {
    return {};
  },
  computed:{
    
  },
  methods: {
    // 选中当前歌曲
    selectSong(song,index) {
      console.log('song-list组件中改变state的currentIndex值');
      this.$emit('selectItem',song,index);
    },
    //构造函数返回描述desc
    getDesc(song) {
        return `${song.singer}·${song.album}`
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
@import "@/assets/style/mixin.scss";
.song-list {
  .item {
    display: flex; // 由于是flex布局,对于居中处理采用align-items方式
    align-items: center; // align-items属性：定义在交叉轴上的对齐方式
    height: 64px;
    font-size: 14px;
    .content {
      flex: 1;
      line-height: 20px;
      overflow: hidden;
      .name {
        font-size: 14px;
        color:  rgba(0, 0, 0, 0.8);
        white-space: nowrap;// 强制不换行
      }
      .desc {
        color: rgba(82, 82, 82, 0.4);
        font-size: 12px;
        white-space: nowrap;// 强制不换行 
      }
    }
  }
}
</style>
